//获取下拉框中option
$("document").ready(function(){
	//获取下拉列表里面的数值
	$.ajax({
		"url":"/zhgl-jzstyxx-manage/index/getPeriod",
		"type":"POST",
		"dataType":"json",
		"success":function(obj){
			if(obj!=null){
				for(var i=0;i<obj.length;i++){
					$("#sel").append("<option id="+obj[i].dictCode+" value="+obj[i].dictName+">"+obj[i].dictName+"</option>");
				}
			}
		}
	});	
});

//“单击查询按钮”根据下拉框的查询值，重新查询数据
$("#searchTable").click(function(){
	var val=($("#sel").val());
	var id=$("#sel>option:selected").attr("id");
	//根据下拉框中option标签的id来查询本日，近7日，近30日的消息发送延迟
	if(id==2101){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getTodayDelayByTimeByOption?id="+id,"type":"POST","dataType":"json",
			"success":function(obj){getTodayDelayByTimeByOption(nums,hours); }
		});
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getTodayDelayByTopicByOption?id="+id,"type":"POST","dataType":"json",
			"success":function(obj){getTodayDelayByTopicByOption(topicList,messageList);}
		});
	}//if id=53结束
	if(id==2102){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getWeekDelayByTimeByOption?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var ts=obj[0];//topic
				var css=obj[1];//nums
				var cs=[];
				for(var i=0;i<7;i++){
					var a=css[i].toFixed(2);
					cs.push(a);
				}
				getWeekDelayByTimeByOption(ts,cs);
			}
		})
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getWeekDelayByTopicByOption?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var topic=obj[0];//topic
				var countss=obj[1];//nums
				for(var i=0;i<countss.length;i++){
					var a=countss[i].toFixed(2);
					counts.push(a);
				}
				getWeekDelayByTopicByOption(topic,counts);
			}
		});
	}
	if(id==2103){
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMonthDelayByTimeByOption?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var mts=obj[0];//topic
				var mcss=obj[1];//nums
				var mcs=[];
				for(var i=0;i<30;i++){
					var a=mcss[i].toFixed(2);
					mcs.push(a);
				}
				getMonthDelayByTimeByOption(mts,mcs);
			}
		})
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getMonthDelayByTopicByOption?id="+id,
			"type":"POST",
			"dataType":"json",
			"success":function(obj){
				var mtopic=obj[0];//topic
				var mcountsc=obj[1];//nums
				for(var i=0;i<mcountsc.length;i++){
					var a=mcountsc[i].toFixed(2);
					mcounts.push(a);
				}
				getMonthDelayByTopicByOption(mtopic,mcounts);
			}
		})
	}//if id=55结束
});//单击事件结束
/*******x轴为时间****本日延迟图表*****/
function getTodayDelayByTimeByOption(nums,hours){
	//初始化echars实例
	var myChart = echarts.init(document.getElementById('chart-f'));
	//自定义表格配置项
	var option = {
		//表格背景颜色
		backgroundColor : '#10D09F',
		//标题样式
		title : {
			text :  time+'各时间段消息发送延迟',
			/* subtext: '单位: 毫秒', */
			textStyle : {
				fontSize : 14,
				color : '#fff',
			},
			subtextStyle:{
				fontSize : 12,
				color : '#fff',
			},
			x : 55,
			y : 10,
		},
		//提示框，鼠标悬浮交互时的信息提示
		tooltip : {
			trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		//是否启用拖拽重计算特性
		calculable : true,
		//X轴设计
		xAxis : [ {
			type : 'category',
			name:'时间',
			/* boundaryGap : false, *///是否以原点为中心
			axisLabel : {
				show : true,
				textStyle : {
					color : '#fff',
				},
				interval:0,
				rotate:30,
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
			data :hours
		} ],
		//Y轴设计
		yAxis : [ {
			type : 'value',
			name:'单位: 毫秒',
			axisLabel : {
				formatter : '{value}',
				textStyle : {
					color : '#fff',
				},
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
		} ],
		series : [
				{
					name : '延迟毫秒',
					type : 'bar',
					data : nums,
					barWidth : 30,
					itemStyle : {
						emphasis : {
							barBorderRadius : 30,
						},
						normal : {
							barBorderRadius : [ 20, 20, 0, 0 ],
							color : '#fff',
						},
					},
					markPoint : {
						itemStyle : {
							show : true,
							color : '#333',
						},
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
				}, ]
	};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}
/*******x轴为主题队列****本日延迟图表*****/
function getTodayDelayByTopicByOption(topicLi,messageLi){
	//初始化echars实例
	var myChart = echarts.init(document.getElementById('chart-s'));
	//自定义表格配置项
	var option = {
			//表格背景颜色
			backgroundColor:'#5396C0',
			//标题样式
		    title : {
		        text:time+ '各主题队列消息平均延迟',
		        /* subtext: '纯属虚构' */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
		    },
			//提示框，鼠标悬浮交互时的信息提示
		    tooltip : {
		        trigger: 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
		    	}
		    },
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			 //是否启用拖拽重计算特性
		    calculable : true,
		    //X轴设计
		    xAxis : [
		        {
		            type : 'category',
					/* boundaryGap : false, *///是否以原点为中心
					name:'主题队列',
					axisLabel:{
						show:true,
						textStyle:{
							color:'#fff',
						},
						interval:0,
						rotate:30,
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		            data :topicList,
		        }
		    ],
		    //Y轴设计
		    yAxis : [
		        {
		            type : 'value',
		            name:'单位: 毫秒',
					axisLabel:{
						formatter:'{value}',
						textStyle:{
							color:'#fff',
						},
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		        }
		    ],
		    series : [
		        {
		            name:'延迟毫秒',
		            type:'bar',
		            data:messageList,
		            barWidth:30,
		            itemStyle:{
		            	emphasis:{
		            		barBorderRadius:30,
		            	},
		            	normal:{
		            		barBorderRadius:[20,20,0,0],
		            		color:'#fff',
		            	},
		            },
		            markPoint : {
		            	itemStyle:{
		            		show:true,
		            		color:'#333',
		            	},
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		        },
		    ]
		};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}
/*******x轴为时间****7日延迟图表*****/
function getWeekDelayByTimeByOption(ts,cs){
	var myChart = echarts.init(document.getElementById('chart-f'));
	//自定义表格配置项
	var option = {
		//表格背景颜色
		backgroundColor : '#10D09F',
		//标题样式
		title : {
			text : '近七日消息发送延迟',
			/* subtext: '单位: 毫秒', */
			textStyle : {
				fontSize : 14,
				color : '#fff',
			},
			subtextStyle:{
				fontSize : 12,
				color : '#fff',
			},
			x : 55,
			y : 10,
		},
		//提示框，鼠标悬浮交互时的信息提示
		tooltip : {
			trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		//是否启用拖拽重计算特性
		calculable : true,
		//X轴设计
		xAxis : [ {
			type : 'category',
			name:'时间',
			/* boundaryGap : false, *///是否以原点为中心
			axisLabel : {
				show : true,
				textStyle : {
					color : '#fff',
				},
				interval:0,
				rotate:30,
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
			data :ts
		} ],
		//Y轴设计
		yAxis : [ {
			type : 'value',
			name:'单位: 毫秒',
			axisLabel : {
				formatter : '{value}',
				textStyle : {
					color : '#fff',
				},
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
		} ],
		series : [
				{
					name : '延迟毫秒',
					type : 'bar',
					data : cs,
					barWidth : 30,
					itemStyle : {
						emphasis : {
							barBorderRadius : 30,
						},
						normal : {
							barBorderRadius : [ 20, 20, 0, 0 ],
							color : '#fff',
						},
					},
					markPoint : {
						itemStyle : {
							show : true,
							color : '#333',
						},
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
				}, ]
	};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}
/*******x轴为主题队列****7日延迟图表*****/
function getWeekDelayByTopicByOption(topic,counts){
	//初始化echars实例
	var myChart = echarts.init(document.getElementById('chart-s'));
	//自定义表格配置项
	var option = {
			//表格背景颜色
			backgroundColor:'#5396C0',
			//标题样式
		    title : {
		        text: '近七日各主题队列消息发送延迟',
		        /* subtext: '纯属虚构' */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
		    },
			//提示框，鼠标悬浮交互时的信息提示
		    tooltip : {
		        trigger: 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
		    	}
		    },
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			 //是否启用拖拽重计算特性
		    calculable : true,
		    //X轴设计
		    xAxis : [
		        {
		            type : 'category',
					/* boundaryGap : false, *///是否以原点为中心
					name:'主题队列',
					axisLabel:{
						show:true,
						textStyle:{
							color:'#fff',
						},
						interval:0,
						rotate:30,
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		            data :topic,
		        }
		    ],
		    //Y轴设计
		    yAxis : [
		        {
		            type : 'value',
		            name:'单位: 毫秒',
					axisLabel:{
						formatter:'{value}',
						textStyle:{
							color:'#fff',
						},
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		        }
		    ],
		    series : [
		        {
		            name:'延迟毫秒',
		            type:'bar',
		            data:counts,
		            barWidth:30,
		            itemStyle:{
		            	emphasis:{
		            		barBorderRadius:30,
		            	},
		            	normal:{
		            		barBorderRadius:[20,20,0,0],
		            		color:'#fff',
		            	},
		            },
		            markPoint : {
		            	itemStyle:{
		            		show:true,
		            		color:'#333',
		            	},
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		        },
		    ]
		};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}
/*******x轴为时间****30日延迟图表*****/
function getMonthDelayByTimeByOption(mts,mcs){
	var myChart = echarts.init(document.getElementById('chart-f'));
	//自定义表格配置项
	var option = {
		//表格背景颜色
		backgroundColor : '#10D09F',
		//标题样式
		title : {
			text : '近30日消息发送延迟',
			/* subtext: '单位: 毫秒', */
			textStyle : {
				fontSize : 14,
				color : '#fff',
			},
			subtextStyle:{
				fontSize : 12,
				color : '#fff',
			},
			x : 55,
			y : 10,
		},
		//提示框，鼠标悬浮交互时的信息提示
		tooltip : {
			trigger : 'axis',
			formatter:function(a){
	    		return a[0].name+"<br/>"
	    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
	    	}
		},
		toolbox:{
			show:true,
			color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
			backgroundColor:'rgba(255,255,255,0.8)',
			feature:{
				mark:{show:true},//辅助线开关
				dataView:{show:true,readOnly:false},//数据视图
				magicType:{//图表间切换
					show:true,
					type:['line','bar'],
				},
				restore:{show:true,title:'还原',color:'black'},//还原
				saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
			}
		},
		//是否启用拖拽重计算特性
		calculable : true,
		//X轴设计
		xAxis : [ {
			type : 'category',
			name:'时间',
			/* boundaryGap : false, *///是否以原点为中心
			axisLabel : {
				show : true,
				textStyle : {
					color : '#fff',
				},
				interval:0,
				rotate:30,
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
			data :mts
		} ],
		//Y轴设计
		yAxis : [ {
			type : 'value',
			name:'单位: 毫秒',
			axisLabel : {
				formatter : '{value}',
				textStyle : {
					color : '#fff',
				},
			},
			axisLine : {
				lineStyle : {
					color : '#fff',
				},
			},
			axisTink : {
				show : false,
			},
			splitLine : {
				show : false,
			},
		} ],
		series : [
				{
					name : '延迟毫秒',
					type : 'bar',
					data : mcs,
					barWidth : 30,
					itemStyle : {
						emphasis : {
							barBorderRadius : 30,
						},
						normal : {
							barBorderRadius : [ 20, 20, 0, 0 ],
							color : '#fff',
						},
					},
					markPoint : {
						itemStyle : {
							show : true,
							color : '#333',
						},
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
				}, ]
	};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}
/*******x轴为主题队列****30日延迟图表*****/
function getMonthDelayByTopicByOption(mtopic,mcounts){
	//初始化echars实例
	var myChart = echarts.init(document.getElementById('chart-s'));
	//自定义表格配置项
	var option = {
			//表格背景颜色
			backgroundColor:'#5396C0',
			//标题样式
		    title : {
		        text:'近30日各主题队列消息发送延迟',
		        /* subtext: '纯属虚构' */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
		    },
			//提示框，鼠标悬浮交互时的信息提示
		    tooltip : {
		        trigger: 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"毫秒<br/>"
		    	}
		    },
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			 //是否启用拖拽重计算特性
		    calculable : true,
		    //X轴设计
		    xAxis : [
		        {
		            type : 'category',
					/* boundaryGap : false, *///是否以原点为中心
					name:'主题队列',
					axisLabel:{
						show:true,
						textStyle:{
							color:'#fff',
						},
						interval:0,
						rotate:30,
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		            data :mtopic,
		        }
		    ],
		    //Y轴设计
		    yAxis : [
		        {
		            type : 'value',
		            name:'单位: 毫秒',
					axisLabel:{
						formatter:'{value}',
						textStyle:{
							color:'#fff',
						},
					},
					axisLine:{
						lineStyle:{
							color:'#fff',
						},
					},
					axisTink:{
						show:false,
					},
					splitLine:{
						show:false,
					},
		        }
		    ],
		    series : [
		        {
		            name:'延迟毫秒',
		            type:'bar',
		            data:mcounts,
		            barWidth:30,
		            itemStyle:{
		            	emphasis:{
		            		barBorderRadius:30,
		            	},
		            	normal:{
		            		barBorderRadius:[20,20,0,0],
		            		color:'#fff',
		            	},
		            },
		            markPoint : {
		            	itemStyle:{
		            		show:true,
		            		color:'#333',
		            	},
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		        },
		    ]
		};
	//使用指定上午配置型和数据显示图表
	myChart.setOption(option);
}